<template>
  <el-select
    v-model="modelValue"
    :placeholder="'请选择' + field.label"
    :multiple="field.type === 'multiple-select'"
    style="min-width: 200px"
  >
    <el-option
      v-for="option in field.options"
      :key="option.value"
      :label="option.label"
      :value="option.value"
    />
  </el-select>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { FormField } from "../utils";

interface Props {
  modelValue: string | string[];
  field: FormField;
}

interface Emits {
  (e: "update:modelValue", value: string | string[]): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const modelValue = computed({
  get: () => props.modelValue,
  set: value => emit("update:modelValue", value)
});
</script>
